<template>
  <div class="map-container" ref="mapContainer">
    <div
      id="map"
      :style="{ width:heightAndWidth.width,height:heightAndWidth.height + 'px' }"
      ref="basicMapbox"
    ></div>
    <img
      ref="bottom-sanjiao"
      :style="{top:heightAndWidth.height - 25 + 'px'}"
      v-show="!bottomFlag"
      class="bottom-sanjiao"
      @click="clickBottomHandler"
      src="../../../assets/sanjiao.png"
      alt
    />
    <img
      ref="sanjian"
      v-show="sanjiaoFlag"
      class="outer-sanjiao"
      @click="clickToggleHandler"
      src="../../../assets/sanjiao.png"
      alt
    />
    <div ref="boxRight" class="box-right">
      <img
        class="sanjiao"
        v-show="!sanjiaoFlag"
        @click="clickToggleHandler"
        src="../../../assets/sanjiao.png"
        alt
      />
      <el-aside width="500px">
        <el-card class="card_a" style="margin-top: 10px; border-radius: 10px;">
          <el-row>
            <el-col :span="24">
              <span class="demonstration" style="float: left; margin-bottom: 30px">
                <i class="el-icon-house ic"></i>洞幅概要
              </span>
            </el-col>
            <el-col :span="12">
              <h2>{{ sst.tunnelLength }}m</h2>
            </el-col>
            <el-col :span="12">
              <h2>{{ sst.tunnelProgress }}%</h2>
            </el-col>
            <el-col :span="12" style="margin-top:8px">开挖长度</el-col>
            <el-col :span="12" style="margin-top:8px">开挖进度</el-col>
          </el-row>

          <!--         施工进度 -->
          <el-row style="margin-top: 20px">
            <el-col :span="8">
              <span class="about">施工进度:</span>
            </el-col>
            <el-col :span="16">
              <el-progress
                :text-inside="true"
                :stroke-width="17"
                :percentage="sst.tunnelProgress"
                status="success"
              ></el-progress>
            </el-col>
          </el-row>
          <!--          超前地质预报进度-->
          <el-row style="margin-top: 20px">
            <el-col :span="8">
              <span class="about">超前地质预报进度:</span>
            </el-col>
            <el-col :span="16">
              <el-progress
                :text-inside="true"
                :stroke-width="17"
                :percentage="sst.predictioninfo"
                status="warning"
              ></el-progress>
            </el-col>
          </el-row>

          <!--          施工质量检测进度-->
          <el-row style="margin-top: 20px">
            <el-col :span="8">
              <span class="about">初支质量检测进度</span>
            </el-col>
            <el-col :span="16">
              <el-progress
                :text-inside="true"
                :stroke-width="17"
                :percentage="sst.chu"
                status="exception"
              ></el-progress>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="8">
              <span class="about">二衬质量检测进度</span>
            </el-col>
            <el-col :span="16">
              <el-progress
                :text-inside="true"
                :stroke-width="17"
                :percentage="sst.er"

              ></el-progress>
            </el-col>
          </el-row>
          <div class="text">
            <el-row>
              <el-col :span="6">
                <span class="about">所属隧道</span>
              </el-col>
              <el-col :span="18">
                <span>{{ sst.tunnelName }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="about">起止里程</span>
              </el-col>
              <el-col :span="18">
                <span>{{ sst.mileage }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="about">设计单位</span>
              </el-col>
              <el-col :span="18">
                <span>{{ sst.designerName }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="about">施工单位</span>
              </el-col>
              <el-col :span="18">
                <span>{{ sst.constructionName }}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-aside>
    </div>

    <div class="bottom-monitor" ref="bottomMonitor">
      <img
        ref="bottom-sanjiao"
        v-show="bottomFlag"
        class="bottom-box-sanjiao"
        @click="clickBottomHandler"
        src="../../../assets/sanjiao.png"
        alt
      />
      <!--      <el-footer>-->
      <el-card style="border-radius: 10px">
        <!-- 标题 -->
        <el-row>
          <el-col :span="24">
            <el-input placeholder="断面字母是大写" class="tunnelsectionclass" v-model="tunnelsectionName"></el-input>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="selecttunnelsection"
              plain
              class="tunnelsectionbutton"
            >搜索断面</el-button>
            <el-dropdown split-button type="primary" @command="changeValue">
              {{ selecttunnelSectionName }}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(p,index) in tunnectSection"
                  :key="index"
                  :command="p"
                >{{ p.sectionName }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" class="button" @click="line" style="float: right">选择线路</el-button>
          </el-col>
        </el-row>
        <!-- 内容 update start -->
        <el-row>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <i class="el-icon-edit"></i>
                <span>施工监控量测</span>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">拱顶下沉</u>：
                <b class="card-moitter-value">{{ MonitorMeasurementVO.monitorMeasurement }} mm</b>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">拱脚下沉</u>：
                <b class="card-moitter-value">{{ MonitorMeasurementVO.monitorFoot }} mm</b>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">周边位移</u>：
                <b class="card-moitter-value">{{ MonitorMeasurementVO.monitorPeriphery }} mm</b>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">地表下沉</u>：
                <b class="card-moitter-value">{{ MonitorMeasurementVO.monitorMeasurement }} mm</b>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <i class="el-icon-video-camera-solid"></i>
                <span>超前地质预报</span>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">里程范围</u>：
                <b
                  class="card-moitter-value"
                >{{ AdvanceInfo.startMileage }}~{{ AdvanceInfo.endMileage }}</b>
              </div>
              <!-- <div class="card-moitter">
                <u class="card-moitter-title">设计级别</u>：
                <b class="card-moitter-value">{{ AdvanceInfo.designGrade }}</b>
              </div>-->
              <div class="card-moitter">
                <u class="card-moitter-title">预报级别</u>：
                <b class="card-moitter-value">{{ AdvanceInfo.predictionGrade }}</b>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">预报结果</u>：
                <b
                  show-overflow-tooltip
                  class="card-moitter-value scroll-div"
                >{{ AdvanceInfo.predictionResult }}</b>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <i class="el-icon-message-solid"></i>
                <span>施工质量检测</span>
              </div>
              <div class="card-moitter">
                <u class="card-moitter-title">里程范围</u>：
                <b class="card-moitter-value" v-if="MonitorMeasure[0]">
                  {{
                  MonitorMeasure[0].startMileage + "~" + MonitorMeasure[0].endMileage
                  }}
                </b>
              </div>
              <div
                class="card-moitter card-motter-bottom"
                v-for="(p,index) in MonitorMeasure"
                :key="index"
              >
                <u class="card-moitter-title">{{ p.testType }}</u>：
                <b>
                  <!--                    <span show-overflow-tooltip class="card-moitter-bottom-value-left">{{ p.mileageContext }}</span>-->
                  <span
                    v-if=" p.result == 1"
                    show-overflow-tooltip
                    class="card-moitter-bottom-value-right"
                  >合格</span>
                  <span
                    v-if=" p.result == 2"
                    show-overflow-tooltip
                    class="card-moitter-bottom-value-right"
                  >不合格</span>
                </b>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <i class="el-icon-message-solid"></i>
                <span>围岩等级统计</span>
              </div>
              <div class="card-moitter">
                <div id="weiyan" class="weiyan"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 内容 update end -->
      </el-card>
      <!--      </el-footer>-->

      <SummaryWidth @onWidEvent="getWidHandler" :flag="flag" />
    </div>
  </div>
</template>

<script>
import api from "../../../api";
import base from "../../../api/base";
import mapboxgl from "mapbox-gl";
import MapboxLanguage from "@mapbox/mapbox-gl-language";
import SummaryWidth from "./SummaryWidth.vue";

export default {
  data() {
    return {
      tunnelsectionName: "",
      percentage: 0,
      sid: 0,
      selecttunnelSectionName: "选择断面",
      // 施工质量检测  初支检测   二衬检测
      MonitorMeasure: [],
      // 超前地质预报
      AdvanceInfo: {},
      //断面信息
      tunnectSection: [],
      // 洞幅id
      wid: 0,
      flag: false,
      //洞幅概要
      sst: {
        projectName: "",
        tunnelName: "",
        mileage: "",
        designerName: "",
        constructionName: "",
        tunnelLength: 0,
        tunnelProgress: 0.0,
        chu: 0,
        er: 0,
      },
      //施工量测数据
      MonitorMeasurementVO: {
        //拱脚下沉
        monitorFoot: 1.4,
        // 拱顶下沉
        monitorMeasurement: 0.0,
        monitorPeriphery: 3.6,
        monitorSurface: 0.0,
      },
      mining: "12840",
      mining_a: "20",
      mapType: "B_NORMAL_MAP",
      count: 1,
      zoom: 14,
      center: [110.678849, 36.974214],
      color: "red",
      data: [
        {
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                [110.678849, 36.974214],
                [110.678625, 36.974228],
                [110.678401, 36.974243],
              ],
            ],
          },
          properties: {
            height: 1000,
          },
        },
      ],
      sanjiaoFlag: true,
      bottomFlag: false,
    };
  },
  mounted() {},
  components: {
    SummaryWidth,
  },
  methods: {
    /**
     * 根据洞幅id查询断面
     * @param {*} wid 洞幅id
     */
    gettunnectSection(wid) {
      api.tunnelSectionfindByWid({ wid }).then((res) => {
        if (res.data.code == 2001) {
          this.tunnectSection = res.data.data;
        }
      });
    },
    // 获取施工测量  超前地质预报  施工质量监测 数据
    findTunnelSectionInfo(sid, wid) {
      // 获取坐标
      api.SupervisionWorkFindTunnelSectionInfo({ sid, wid }).then((res) => {
        if (res.data.code == 2001) {
          if (!res.data.data.MonitorMeasurementVO) {
            this.MonitorMeasurementVO = {};
          } else {
            this.MonitorMeasurementVO = res.data.data.MonitorMeasurementVO;
          }
          if (!res.data.data.AdvanceInfo) {
            this.AdvanceInfo = {};
          } else {
            this.AdvanceInfo = res.data.data.AdvanceInfo;
          }
          if (!res.data.data.MonitorMeasure) {
            this.MonitorMeasure = {};
          } else {
            this.MonitorMeasure = res.data.data.MonitorMeasure;
          }
        }
      });
    },
    // 获取洞幅概要
    SupervisionWorkSummaryTunnelWidth(wid) {
      // 获取坐标
      api.SupervisionWorkSummaryTunnelWidth({ wid }).then((res) => {
        if (res.data.code == 2001) {
          //设计单位
          this.sst.constructionName = res.data.data.constructionName;
          // 施工单位
          this.sst.designerName = res.data.data.designerName;
          // 隧道进度
          this.sst.tunnelProgress = res.data.data.tunnelProgress;
          // 开挖进度
          this.sst.tunnelLength = res.data.data.tunnelLength;
          // 超前地质进度
          this.sst.predictioninfo = res.data.data.predictioninfo;
          // 施工质量检测进度
          this.sst.er = res.data.data.er;
          this.sst.chu = res.data.data.chu;
          this.sst.mileage = res.data.data.mileage;
          this.sst.tunnelName = res.data.data.tunnelName;
        }
      });
    },
    // 选择线路
    line() {
      this.$bus.$emit("onShowerSummaryWidth", true);
    },
    changeValue(p) {
      this.selecttunnelSectionName = p.sectionName;
      this.sid = p.id;
      // 获取隧道监控数据 包括 监控量测 超前地质预报 施工质量监测
      this.findTunnelSectionInfo(this.sid, this.wid);
    },
    getWidHandler(data) {
      this.wid = data;
      this.gettunnectSection(data);
      // 获取隧道监控数据 包括 监控量测 超前地质预报 施工质量监测
      this.findTunnelSectionInfo(this.sid, data);
      // 洞幅概要
      this.SupervisionWorkSummaryTunnelWidth(data);
      this.SupervisionWorkSummaryTunnelWidth(data);
      this.tunnelWidthweiyan(this.wid);
      // 获取地图信息
      this.init();
    },
    tunnelWidthweiyan(wid) {
      api
        .tunnelWidthweiyan({ wid })
        .then((res) => {
          if (res.data.code == 2001) {
            this.$charts.BingMap("weiyan", res.data.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 初始化
    async init() {
      mapboxgl.accessToken =
        "pk.eyJ1Ijoid2NjMTk5MyIsImEiOiJjbGJwemZvcWYwM2xuM29wY3l5Mmh2c2s4In0.H97yPLsNvVeA0dMhXL_R-Q";
      const map = new mapboxgl.Map({
        container: "map",
        zoom: 13,
        center: [110.9508, 37.022057],
        pitch: 76,
        bearing: 150,
        style: "mapbox://styles/mapbox/satellite-streets-v12",
        hash: false,
      });
      map.addControl(
        new MapboxLanguage({
          defaultLanguage: "zh-Hans",
        })
      );

      console.log(
        base.baseUrl + base.tunnelPositiongetPosition + "?wid=" + this.wid
      );
      // Start downloading the route data, and wait for map load to occur in parallel
      const [{ data: pinRouteGeojson }] = await Promise.all([
        fetch(
          base.baseUrl + base.tunnelPositiongetPosition + "?wid=" + this.wid
        ).then((response) => response.json()),
        map.once("style.load"),
      ]);
      console.log(pinRouteGeojson);

      // Set custom fog
      map.setFog({
        range: [-0.5, 2],
        color: "#def",
        "high-color": "#def",
        "space-color": "#def",
      });

      // Add terrain source, with slight exaggeration
      map.addSource("mapbox-dem", {
        type: "raster-dem",
        url: "mapbox://mapbox.terrain-rgb",
        tileSize: 512,
        maxzoom: 14,
      });
      map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });

      const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
      // Create the marker and popup that will display the elevation queries
      const popup = new mapboxgl.Popup({ closeButton: false });
      const marker = new mapboxgl.Marker({
        color: "red",
        scale: 0.8,
        draggable: false,
        pitchAlignment: "auto",
        rotationAlignment: "auto",
      })
        .setLngLat(pinRoute[0])
        .setPopup(popup)
        .addTo(map)
        .togglePopup();

      // Add a line feature and layer. This feature will get updated as we progress the animation
      map.addSource("line", {
        type: "geojson",
        // Line metrics is required to use the 'line-progress' property
        lineMetrics: true,
        data: pinRouteGeojson,
      });
      map.addLayer({
        type: "line",
        source: "line",
        id: "line",
        paint: {
          "line-color": "rgba(0,0,0,0)",
          "line-width": 5,
        },
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
      });

      await map.once("idle");
      const animationDuration = 20000;
      const path = turf.lineString(pinRoute);
      // Get the total line distance
      const pathDistance = turf.lineDistance(path);
      let start;

      function frame(time) {
        if (!start) start = time;
        const animationPhase = (time - start) / animationDuration;
        if (animationPhase > 1) {
          return;
        }

        // Get the new latitude and longitude by sampling along the path
        const alongPath = turf.along(path, pathDistance * animationPhase)
          .geometry.coordinates;
        const lngLat = {
          lng: alongPath[0],
          lat: alongPath[1],
        };

        // Sample the terrain elevation. We round to an integer value to
        // prevent showing a lot of digits during the animation
        const elevation = Math.floor(
          // Do not use terrain exaggeration to get actual meter values
          map.queryTerrainElevation(lngLat, { exaggerated: false })
        );

        // Update the popup altitude value and marker location
        popup.setHTML("终点: " + elevation + "m<br/>");
        marker.setLngLat(lngLat);

        // Reduce the visible length of the line by using a line-gradient to cutoff the line
        // animationPhase is a value between 0 and 1 that reprents the progress of the animation
        map.setPaintProperty("line", "line-gradient", [
          "step",
          ["line-progress"],
          "red", //更改线条颜色
          animationPhase,
          "rgba(255, 0, 0, 0)",
        ]);

        // Rotate the camera at a slightly lower speed to give some parallax effect in the background
        const rotation = 150 - animationPhase * 40.0;
        map.setBearing(rotation % 360);

        window.requestAnimationFrame(frame);
      }

      window.requestAnimationFrame(frame);
    },
    clickToggleHandler() {
      if (this.sanjiaoFlag) {
        this.$refs.boxRight.style = "width:500px;";
        this.sanjiaoFlag = false;
      } else {
        this.$refs.boxRight.style = "width:0;";
        this.sanjiaoFlag = true;
      }
    },
    /**
     * 底部展示按钮
     */
    clickBottomHandler() {
      this.$refs.bottomMonitor.style = "height:397px";
      if (this.bottomFlag) {
        this.$refs.bottomMonitor.style = "height:0px";
        this.bottomFlag = false;
      } else {
        this.$refs.bottomMonitor.style = "height:398px";
        this.bottomFlag = true;
      }
    },
    selecttunnelsection() {
      if (this.tunnelsectionName === "") {
        this.$message({
          message: "请输入断面信息",
          type: "warning",
        });
        return;
      }

      api
        .tunnelSectionfindBySectionName({
          tunnelSectionName: this.tunnelsectionName,
        })
        .then((res) => {
          if (res.data.code == 2001) {
            console.log(res.data.data.id);
            this.findTunnelSectionInfo(res.data.data.id, this.wid);
          }
        })
        .catch((err) => {
          this.$message({
            message: err.data.message,
            type: "warning",
          });
          return;
        });
    },
  },
  computed: {
    heightAndWidth() {
      return {
        width: "100%",
        height: document.body.offsetHeight - 50,
      };
    },
  },
};
</script>

<style>
.el-main {
  padding: 0 !important;
}

.box-right {
  position: absolute;
  top: 70px;
  right: 20px;
  overflow: hidden;
  width: 0px;
  transition: 0.3s all;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* card */
.text {
  font-size: 14px;
}

.item {
  padding: 4px 0;
}

.box-card {
  width: 96%;
  margin-top: 10px;
  height: 260px;
}

/* button */
.button {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  margin-top: 10px !important;
  line-height: 10px !important;
}



/* 走马灯 */
.demonstration {
  font-weight: bolder;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 10px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

/* 图标 */
i {
  /* color: rgb(64, 158, 255); */
  /* margin: 10px; */
  font-size: 20px;
  position: relative;
  top: 2px;
}

span {
  margin-left: 4px;
}

.text {
  margin-top: 16px;
}

.text span {
  line-height: 40px;
  font-size: 15px;
}

.card_a {
  /*width: 480px;*/
  background: rgba(255, 255, 255, 0.6);
}

.bmap-page-container {
  height: 800px;
}

.bingmap {
  height: 400px;
  width: 400px;
  margin-top: 70px;
  margin: 0 auto;
}

.weiyan {
  width: 100%;
  height: 200px;
}

.clearfix h3 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
  width: 450px;
}

.text .about {
  font-weight: bold;
  font-size: 15px;
}

.card-moitter {
  width: 100%;
  overflow: hidden;
  clear: both;
  line-height: 40px;
  display: flex;
}

.card-moitter .card-moitter-title {
  padding-left: 15px;
  font-size: 15px;
  color: #666262;
}

.card-moitter .card-moitter-value {
  padding-right: 15px;
  flex: 1;
  text-align: right;
}

.card-motter-bottom {
  border-bottom: 1px solid #f1f1f1;
}

.card-motter-bottom:last-child {
  border-bottom: none;
}

.card-moitter-bottom-value-left {
  float: left;
  padding-left: 15px;
}

.card-moitter-bottom-value-right {
  float: right;
  padding-right: 15px;
}

.sanjiao {
  position: absolute;
  left: -25px;
  top: 60px;
  transform: rotate(90deg);
}

.outer-sanjiao {
  position: fixed;
  right: 0px;
  top: 25%;
  transform: rotate(-90deg);
}

.bottom-sanjiao {
  position: absolute;
  left: 50%;
  margin-left: -40px;
}

.bottom-monitor {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 0;
  overflow: hidden;
  transition: 0.3s ease-in;
}

.bottom-box-sanjiao {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -25px;
  transform: rotate(180deg);
}
.tunnelsectionclass {
  width: 200px;
  float: left;
}
.tunnelsectionbutton {
  float: left;
  margin-left: 10px;
  height: 40px;
  padding-top: 7px;
}
.el-card__header {
  text-align: left;
}
.el-card__header i,
.demonstration i {
  margin-right: 8px;
  color: #409eff;
}

/* 增加内容展示滚动样式 */
.scroll-div {
  height: 90px;
  overflow-y: auto;
  line-height: 20px;
  padding-top: 10px;
}
.scroll-div::-webkit-scrollbar {
  width: 10px;
}

.scroll-div::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 5px;
}

.scroll-div::-webkit-scrollbar-thumb:hover {
  background: #409eff;
}

.scroll-div::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #d9d9d9;
}
</style>
